<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Js.ext.validate</title>
		<script type="text/javascript" src="../../lib/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="../../lib/savvyui.js"></script>
		<script type="text/javascript" src="../unit-testing.js"></script>
		<link type="text/css" href="../../css/all.css" rel="stylesheet" media="all" />
	</head>
	<body>
		<h1>Js.ext.validate</h1>
		<form id="contact-me">
			<div>
				<label>Name</label>
				<input type="text" name="name" class="required min-4" />
			</div>
			<div>
				<label>E-mail</label>
				<input type="text" name="email" class="email" />
			</div>
			<div>
				<label>Subject</label>
				<input type="text" name="subject" class="required min-5" />
			</div>
			<div>
				<label>Date</label>
				<input type="text" name="date" class="custom-date" />
			</div>
			<div>
				<input type="submit" id="contact-me-submit" value="Submit Form" />
			</div>
		</form>
		<div id="result">
			<h2>Result</h2>
		</div>
		<script type="text/javascript">
		<!--
		Js.debug.enable = true;
		Js.debug.dev = true;
		
		/*
		Add global validation keyword
		Keyword: custom-date
		Required: Yes
		Type of Test: Regular Expression
		Error Message: Require date input
		*/
		Js.setup.ext.validate({
			customDate: {
				regex: /^(\d{2})(\-|\/)(\d{2})(\-|\/)(\d{4})$/,
				error: "Require date input DD-MM-YYYY",
				required: true
			}
		});
		
		// Wait until the DOM is ready...
		jQuery(function($) {
		 
			// Add event handler whenever someone submit #contact-me form
			$("#contact-me").submit(function() {
				// initiate the Form Validation for #contact-me form
				Js.data.validation = new Js.ext.validate(this);
		 
				if ( !!Js.data.validation.result ) {
					// if all input field validated
					alert("Your done, querystring: " + Js.data.validation.result);
				}
				else {
					// if any of the field not validated
					alert("You got an error, please fix it");
				}
				
				// prevent form to actually submit anything
				return false;
			});
		});
		-->
		</script>
	</body>
</html>
